<template>
  <div class="home">
    <!-- 前往搜索 -->
    <div class="home1">
      <img src="../../assets/img/address.png" alt />
      <img src="../../assets/img/white.png" alt />
      <to-search width="50%"></to-search>
      <img src="../../assets/img/store.png" alt />
    </div>
    <div>
      <!-- 快速导航 -->
      <cate-vue></cate-vue>
      <!-- 轮播图 -->
      <banner-vue></banner-vue>
      <!-- 商品列表 -->
      <goods-vue></goods-vue>
    </div>
  </div>
</template>

<script>
import cateVue from "./components/cate.vue"
import bannerVue from "./components/banner.vue"
import goodsVue from "./components/goods.vue"
export default {
  components: {
    cateVue,
    bannerVue,
    goodsVue
  }
}
</script>

<style scoped lang="less">
@import url(../../less/index.less);
.cates {
  overflow: hidden;
  a {
    float: left;
    margin: @margin20;
  }
}

a {
  display: inline-block;
  margin: @margin20;
}
.home {
  background-color: @deep;
}
.home1 {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.home1 img:nth-child(2) {
  display: inline-block;
  width: 20%;
}
.home1 img:nth-child(1) {
  display: inline-block;
  width: 5%;
}
.home div:nth-child(2){
  background-color: #ccc;
}
</style>